<template>
  <div class="login">
    <!-- 导航栏 -->
    <van-nav-bar>
      <!-- 左边 -->
      <template #left>
        <div class="leftbox">
          <div class="logo">
            <img src="../assets/logo.png" alt="" />
          </div>
          <div class="logotitle">HEYTEA</div>
        </div>
      </template>

      <!-- 右边 -->
      <template #right>
        <div class="rightbox" @click="back">
          <img src="../assets/nav/looklook.svg" alt="" />
        </div>
      </template>
    </van-nav-bar>

    <!-- 文字 -->
    <div class="textbox">
      <div class="text">欢迎来到喜茶GO!</div>
      <div class="txt">更好的会员服务，注册登录即可体验</div>
    </div>

    <!-- 登录界面 -->
    <div class="interface">
      <van-form @submit="login">
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field
          v-model="user.phone"
          name="手机号"
          label="手机号"
          placeholder="请输入手机号"
          autocomplete="off"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <!-- 输入密码 -->
        <van-field
          v-model="user.password"
          :type="isShow ? 'text' : 'password'"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :right-icon="isShow ? 'eye-o' : 'closed-eye'"
          @click-right-icon="showPassword"
          autocomplete="off"
          :rules="[{ required: true, message: '请填写密码' }]"
        />

        <!-- 忘记密码 -->
        <div class="forgot" @click="onForget">
          <div class="forgot-text">忘记密码？</div>
        </div>

        <!-- 登录 -->
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >

        <!-- 注册 -->
        <van-button round block type="default" @click="showPopup"
          >注册</van-button
        >
      </van-form>
    </div>

    <!-- 注册页面 -->
    <van-popup v-model="show" round closeable position="bottom">
      <div class="reg">
        <div class="text">注册</div>
      </div>

      <div class="regbox">
        <van-form @submit="register">
          <!-- 输入手机号，调起手机号键盘 -->
          <van-field
            v-model="info.phone"
            name="手机号"
            label="手机号"
            placeholder="请输入手机号"
            autocomplete="off"
            :rules="[
              {
                required: true,
                message: '请填写正确的手机号',
                pattern: phoneReg,
              },
            ]"
          />
          <!-- 输入密码 -->
          <van-field
            v-model="info.password"
            :type="isShow ? 'text' : 'password'"
            name="密码"
            label="密码"
            placeholder="请输入密码"
            :right-icon="isShow ? 'eye-o' : 'closed-eye'"
            @click-right-icon="showPassword"
            autocomplete="off"
            :rules="[
              {
                required: true,
                message: '必须以字母开头,6-16位字母数字下划线组合',
                pattern: passwordReg,
              },
            ]"
          />
          <!-- 输入用户名 -->
          <van-field
            v-model="info.nickName"
            name="用户名"
            label="用户名"
            placeholder="请输入用户名"
            autocomplete="off"
            :rules="[
              {
                required: true,
                message: '1-16位中英文数字下划线组合',
                pattern: nickNameReg,
              },
            ]"
          />

          <van-button round block type="info" native-type="submit"
            >注册</van-button
          >
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "Login",

  data() {
    return {
      // 登录页面
      user: {
        tel: "",
        password: "",
      },

      //是否明文显示密码
      isShow: false,

      //注册页面
      show: false,

      // 注册信息
      info: {
        phone: "",
        password: "",
        nickName: "",
      },

      //手机号正则
      phoneReg: /^1[3-9]\d{9}$/,

      //密码正则(必须以字母开头, 字母数字_组合[6-16])
      passwordReg: /^[A-Za-z]\w{5,15}$/,

      //昵称正则(中英文数字下划线组合[1-16])
      nickNameReg: /^[\u4e00-\u9fa5A-Za-z0-9_]{1,16}$/,
    };
  },

  methods: {
    back() {
      //返回上一级
      this.$router.push({ name: "Order" });
    },

    //跳转到忘记密码页面
    onForget() {
      this.$router.push({ name: "Forget" });
    },

    onSubmit(values) {
      
    },

    //显示密码
    showPassword() {
      this.isShow = !this.isShow;
    },

    // 显示注册弹窗
    showPopup() {
      this.show = true;
    },

    //注册
    register() {
      this.axios({
        method: "post",
        url: "/register",
        data: { ...this.info },
      })
        .then((res) => {
          // 

          this.$toast(res.data.msg);

          //注册成功
          if (res.data.code === 100) {
            this.show = false;
            //清除注册信息
            for (let key in this.info) {
              this.info[key] = "";
            }
          }
        })
        .catch((err) => {
          
        });
    },

    //登录
    login() {
      this.axios({
        method: "post",
        url: "/login",
        data: {
          ...this.user,
        },
      })
        .then((res) => {
          // 

          this.$toast(res.data.msg);

          if (res.data.code === 200) {
            //登录成功

            //将token保存到sessionStorage
            sessionStorage.setItem("token", res.data.token);

            setTimeout(() => {
              this.$router.push({ name: "Order" });
            }, 2000);
          }
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
}

.leftbox {
  display: flex;
  align-content: center;
}

.logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  position: relative;
  top: 2px;
}

.logo img {
  width: 34px;
  height: 34px;
}

.logotitle {
  height: 34px;
  line-height: 34px;
  font-size: 16px;
  font-weight: 600;
  margin-left: 14px;
  position: relative;
  top: 2px;
}

.rightbox {
  width: 20px;
  height: 20px;
}

.rightbox img {
  width: 20px;
  height: 20px;
}

.textbox {
  margin: 80px 0;
  padding: 0 20px;
}

.text {
  height: 30px;
  line-height: 30px;
  font-size: 24px;
  font-weight: 600;
  color: #37343b;
}

.txt {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  color: #8d8d8d;
  margin-top: 20px;
}

// 登录界面
.interface {
  position: relative;
  bottom: 40px;
}

.forgot {
  display: flex;
  margin-top: 20px;
}

.forgot-text {
  margin-left: auto;
  font-size: 14px;
  color: #8d8d8d;
}

/deep/.van-button--info {
  width: 300px;
  height: 40px;
  margin: 30px auto;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  color: #fff;
  background-color: #37343b;
  border-radius: 20px;
  border: 0;
}

/deep/.van-button--default {
  width: 300px;
  height: 40px;
  margin: 30px auto;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  color: #37343b;
  border: 1px solid #37343b;
  background-color: #fff;
  position: relative;
  bottom: 10px;
}

//注册页面
.reg {
  padding: 12px 14px;
}

.regbox {
  margin-top: 10px;
}
</style>